#@front_layout()
	
#define css()
	
#end

#define page()
<div class="page" id="addPage">
	<header class="bar bar-nav">
		 <a class="icon icon-me pull-left open-panel"></a>
	    <a class="icon icon-refresh pull-right"></a>
	    <h1 class="title">
	    	#if(type == "detail")
	  			详情  	
	    	#else if(type == "add")
		    	新增
	    	#end
	    </h1>
	</header>
	<!-- 工具栏 -->
	<nav class="bar bar-tab">
	    <a class="tab-item external" href="#(ctx)/">
	        <span class="icon icon-home"></span>
	        <span class="tab-label">首页</span>
	    </a>
	    <a class="tab-item external active" href="#(ctx)/addView">
	        <span class="icon icon-edit"></span>
	        <span class="tab-label">新增</span>
	    </a>
	    <a class="tab-item external" href="#(ctx)/checkView">
	        <span class="icon icon-emoji"></span>
	        <span class="tab-label">自测</span>
	    </a>
	    <a class="tab-item external" href="#">
	        <span class="icon icon-settings"></span>
	        <span class="tab-label">设置</span>
	    </a>
	</nav>
	<div class="content">
		<form action="#(ctx)/add" method="post" id="addForm">
			<div class="list-block">
				<ul>
					<!-- Text inputs -->
					<li>
						<div class="item-content">
							<div class="item-media">
								<i class="icon icon-form-word"></i>
							</div>
							<div class="item-inner">
								<div class="item-title label">单词</div>
								<div class="item-input">
									<input type="text" placeholder="请输入单词" name="word" id="word" value="#(word.word??)">
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="item-content">
							<div class="item-media">
								<i class="icon icon-form-wordBegin"></i>
							</div>
							<div class="item-inner">
								<div class="item-title label">单词首字母</div>
								<div class="item-input">
									<input type="text" placeholder="单词首字母" readonly="readonly" name="wordBegin" id="wordBegin" value="#(word.wordBegin??)">
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="item-content">
							<div class="item-media">
								<i class="icon icon-form-memoryDeep"></i>
							</div>
							<div class="item-inner">
								<div class="item-title label">记忆深度</div>
								<div class="item-input">
									<label class="label-checkbox item-content">
            							<input type="radio" name="memoryDeep" value="1" #if(word.memoryDeep?? == 1) checked="checked" #end id="memoryDeep1">
            							<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
            							<div class="item-inner">
											<div class="item-title-row">
												<div class="item-title">不认识</div>
											</div>
										</div>
									</label>
									<label class="label-checkbox item-content">
            							<input type="radio" name="memoryDeep" value="2" #if(word.memoryDeep?? == 2) checked="checked" #end id="memoryDeep2">
            							<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
            							<div class="item-inner">
											<div class="item-title-row">
												<div class="item-title">有点印象</div>
											</div>
										</div>
									</label>
									<label class="label-checkbox item-content">
            							<input type="radio" name="memoryDeep" value="3" #if(word.memoryDeep?? == 3) checked="checked" #end id="memoryDeep3">
            							<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
            							<div class="item-inner">
											<div class="item-title-row">
												<div class="item-title">容易忘记</div>
											</div>
										</div>
									</label>
									<label class="label-checkbox item-content">
            							<input type="radio" name="memoryDeep" value="4" #if(word.memoryDeep?? == 4) checked="checked" #end id="memoryDeep4">
            							<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
            							<div class="item-inner">
											<div class="item-title-row">
												<div class="item-title">已记住</div>
											</div>
										</div>
									</label>
								</div>
							</div>
						</div>
					</li>
					#if(type == "detail")
					<input name="id" value="#(word.id??)" type="hidden"/>
					<li>
						<div class="item-content">
							<div class="item-media">
								<i class="icon icon-form-wordBegin"></i>
							</div>
							<div class="item-inner">
								<div class="item-title label">记忆次数</div>
								<div class="item-input">
									<input type="text" readonly="readonly" name="memoryNum" id="memoryNum" value="#(word.memoryNum??)">
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="item-content">
							<div class="item-media">
								<i class="icon icon-form-wordBegin"></i>
							</div>
							<div class="item-inner">
								<div class="item-title label">英译中</div>
								<div class="item-input">#(errorE2C)</div>
							</div>
						</div>
					</li>
					<li>
						<div class="item-content">
							<div class="item-media">
								<i class="icon icon-form-wordBegin"></i>
							</div>
							<div class="item-inner">
								<div class="item-title label">中译英</div>
								<div class="item-input">#(errorC2E)</div>
							</div>
						</div>
					</li>
					#end
					<li class="align-top">
						<div class="item-content">
							<div class="item-media">
								<i class="icon icon-form-comment"></i>
							</div>
							<div class="item-inner">
								<div class="item-title label">单词意义</div>
								<div class="item-input">
									<textarea placeholder="多个意义以逗号分隔" name="comment" id="comment">#(word.comment??)</textarea>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
			
			<div class="content-block">
				<div class="row">
					<div class="col-50">
						<a href="javascript:window.location.href='#(ctx)';" class="button button-big button-fill button-danger">取消</a>
					</div>
					<div class="col-50">
						<a href="javascript:submitForm('#(type)');" class="button button-big button-fill button-success">提交</a>
					</div>
				</div>
			</div>
		</form>
		
	</div>
</div>
#end

#define js()
<script>
function submitForm(type) {
	var word = $("#word").val();
	if(!word) {
		NB.alert("请输入单词！");
		return;
	}
	var comment = $("#comment").val();
	if(!comment) {
		NB.alert("请输入单词意义！");
		return;
	}
	
	var url = "";
	if(type == "add") {
		url = "/add";
	} else if(type == "detail") {
		url = "/updateWord";
	}
	$.post(ctx + "/updateWord", $("#addForm").parseForm(), function(data) {
		window.location.href = ctx;
	});
}

$(function() {
	$("#word").on("input",function(e) {
		var value = e.delegateTarget.value;
		if(value) {
			$("#wordBegin").val(value.charAt(0).toUpperCase());
		}
    });
});
</script>
#end